<!DOCTYPE HTML>
<html>
<head>
  <title>Game 2</title>

</head>
<script type="text/javascript" src="math.js"></script>
<script type="text/javascript" src="game.js"></script>
<script type="text/javascript" src="ball.js"></script>
<script type="text/javascript">

  timer = 0;

  /**
   *
   * @param {Game} game
   * @param {CanvasContext} ctx
   */
  function onTick(game, ctx){
    var counter = document.getElementById("counter");
    timer++;

    counter.textContent = timer.toString();

    game.Update(timer);
    game.Draw(ctx);
  }


  Controller = function(target) {
    var that = this;

    var LEFT =  65; // 'a'
    var RIGHT = 68; // 'd'
    var keystate_ = {};

    window.onkeydown = function(evt) {
      keystate_[evt.keyCode] = true;
    }
    window.onkeyup = function(evt) {
      keystate_[evt.keyCode] = false;
    }


    that.Update = function() {
      if (keystate_[LEFT]) {
        target.Nudge(new Vec2(-1,0));
      } else if (keystate_[RIGHT]) {
        target.Nudge(new Vec2(1,0));
      }
    }

    that.Draw = function(){}
    that.CheckCollisions = function(){}
  }


  function init() {

    var canvas = document.getElementById("mainCanvas");
    var ctx = canvas.getContext("2d");
    var game = new Game("images/Level2.png");
    ctx.drawImage(game.GetMap(), 0, 0);

    var ball = new Ball(game, 200,40);
    game.AddEntity(ball);

    var ctl = new Controller(ball);
    game.AddEntity(ctl);

    window.setInterval(function(){onTick(game,ctx);}, 50);


  }



</script>
<body onload="init()">
  <span id="counter">0</span>
  <canvas id="mainCanvas" width="19200" height="1200"></canvas>
</body>
</html>